<template>
	<view class="home">
		<view class="header">
			<HomeSearch />
		</view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<navigator url="/pages/home/chooseCar">
					<view class="swiper-item">
						<image src="https://i.loli.net/2021/04/14/IsCWTrZX7Myft1i.png" mode="scaleToFill"
							style="width: 700rpx; height: 240rpx;"></image>
					</view>
				</navigator>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<navigator url="/pages/home/carCare">
						<image src="https://sc04.alicdn.com/kf/U2e122855022e49e7aa3ac55d2d733ec19.jpg"
							mode="scaleToFill" style="width: 700rpx; height: 240rpx;"></image>
					</navigator>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://i.loli.net/2021/04/14/IsCWTrZX7Myft1i.png" mode="scaleToFill"
						style="width: 700rpx; height: 240rpx;"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="topline">
			<text style="color: #ff0909; font-size: 32rpx; font-weight: bold; margin-left: 20rpx;">养车</text>
			<text style="color: #821010; font-size: 32rpx; font-weight: bold;">头条</text>
			<text style="font-size: 24rpx; color: #666666; margin-left: 64rpx;">嫌车噪音大? 别瞎折腾了, 先干这事儿试试!</text>
		</view>
		<view class="type">
			<view class="top">
				<view class="item" v-for="item in oneClass" :key="item.oneClassifyId"
					@click="toServicePage(item.oneClassifyName)">
					<image :src="item.oneClassifyImage" mode="scaleToFill" style="width: 140rpx; height: 140rpx;">
					</image>
					<text>{{item.oneClassifyName}}</text>
				</view>

			</view>
			<view class="bottom">
				<view class="item">
					<image src="../../static/image/type-s-1.png" mode="scaleToFill"
						style="width: 70rpx; height: 70rpx;"></image>
					<text class="title">换补轮胎</text>
				</view>
				<view class="item">
					<image src="../../static/image/type-s-2.png" mode="scaleToFill"
						style="width: 70rpx; height: 70rpx;"></image>
					<text class="title">空调清洗</text>
				</view>
				<view class="item">
					<image src="../../static/image/type-s-3.png" mode="scaleToFill"
						style="width: 70rpx; height: 70rpx;"></image>
					<text class="title">全车打蜡</text>
				</view>
				<view class="item">
					<image src="../../static/image/type-s-4.png" mode="scaleToFill"
						style="width: 70rpx; height: 70rpx;"></image>
					<text class="title">划痕补漆</text>
				</view>
				<view class="item">
					<image src="../../static/image/1148@3x.png" mode="scaleToFill" style="width: 70rpx; height: 70rpx;">
					</image>
					<text class="title">领券中心</text>
				</view>
				<view class="item">
					<image src="../../static/image/1149@3x.png" mode="scaleToFill" style="width: 70rpx; height: 70rpx;">
					</image>
					<text class="title">道路救援</text>
				</view>
				<view class="item">
					<image src="../../static/image/1150@3x.png" mode="scaleToFill" style="width: 70rpx; height: 70rpx;">
					</image>
					<text class="title">更换电瓶</text>
				</view>
				<view class="item">
					<image src="../../static/image/1151@3x.png" mode="scaleToFill" style="width: 70rpx; height: 70rpx;">
					</image>
					<text class="title">年检代办</text>
				</view>
				<view class="item">
					<image src="../../static/image/1152@3x.png" mode="scaleToFill" style="width: 70rpx; height: 70rpx;">
					</image>
					<text class="title">叫代驾</text>
				</view>
				<view class="item">
					<image src="../../static/image/1153@3x.png" mode="scaleToFill" style="width: 70rpx; height: 70rpx;">
					</image>
					<text class="title">违章代缴</text>
				</view>
			</view>
		</view>
		<view class="ceramicChip">
			<view class="item1" style="width: 346rpx;height: 234rpx;">
				<text>周周有洗</text>
				<image src="https://z3.ax1x.com/2021/04/15/cgd7CR.png" mode="widthFix" style="width: 300rpx;"></image>
			</view>
			<view class="">
				<view class="item2" style="width: 346rpx;height: 114rpx;">
					<view>5折保养</view>
					<image src="https://z3.ax1x.com/2021/04/15/cgdIUJ.png" mode="widthFix" style="width: 150rpx;">
					</image>
				</view>
				<view class="item3" style="width: 346rpx;height: 114rpx;">
					<view>门店口碑榜</view>
					<image src="https://z3.ax1x.com/2021/04/15/cgwC8I.png" mode="widthFix" style="width: 150rpx;">
					</image>
				</view>
			</view>
		</view>
		<view class="newPeople">
			<image src="https://i.loli.net/2021/04/13/Z7h3ESMtIrBsNAc.png" mode="widthFix" style="width: 702rpx;">
			</image>
		</view>
		<view class="niceStore">
			<view class="title" style="display: flex; justify-content: space-between; font-weight: bold;">
				<text style="font-size: 36rpx; color: #333333;">优选好店</text>
				<text style="font-size: 22rpx; color: #999999;">更多>></text>
			</view>
			<scroll-view class="content" scroll-x="true" enable-flex="true">
				<view class="scroll-item" v-for="item in listShop" :key="item.shopId" @click="toStore(item.shopId)">
					<view class="image">
						<!-- <image :src="item.shopImage" mode="widthFix"
							style="width: 504rpx;">
						</image> -->
						<image src="https://z3.ax1x.com/2021/04/19/cogNrV.png" mode="widthFix"
							style="width: 504rpx;">
						</image>
						<text class="title">{{item.shopName}}</text>
						<text class="browse">30分钟前有100人看过</text>
					</view>
					<view class="service">
						<view
							style="color: #ff0000; background-color: #fff5db; border-radius: 16rpx; margin-right:24rpx;"
							class="">全车打蜡￥79起</view>
						<view
							style="color: #0671c8; background-color: #d4eeff; border-radius: 16rpx; margin-right:24rpx;"
							class="">百元养车￥199起</view>
						<view
							style="color: #0e9f00; background-color: #cdffc8; border-radius: 16rpx; margin-right:24rpx;"
							class="">精致洗车￥120起</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="nearbyStores">
			<view class="title" style="font-weight: bold;">
				<text style="font-size: 36rpx; color: #333333;">附近门店</text>
			</view>
			<view class="chooseLine">
				<view class="chooseItem" style="margin-right: 44rpx;">
					<text style="font-size: 28rpx; color: #ff5300; margin-right: 6rpx;">综合排序</text>
					<image src="../../static/image/zonghepaixu.png" mode="widthFix" style="width: 15rpx;"></image>

				</view>
				<view class="chooseItem">
					<text style="font-size: 28rpx; color: #999999; margin-right: 6rpx;">距离</text>
					<image src="../../static/image/homeAddressIcon.png" mode="widthFix" style="width: 15rpx;"></image>
				</view>
				<view class="chooseItem chooseIcon">
					<text style="font-size: 28rpx; color: #20a8fc; margin-right: 6rpx;">筛选</text>
					<image src="../../static/image/shuaixuan.png" mode="widthFix" style="width: 15rpx;"></image>
				</view>
			</view>
			<view class="business">
				<text class="businessName">标准洗护</text>
				<text class="businessName">标准洗护</text>
				<text class="businessName">标准洗护</text>
				<text class="businessName">标准洗护</text>
			</view>
			<view class="footer">
				<view v-for="item in near.searchHits" :key="item.shopId">
					<navigator :url="'/pages/home/maintainStore?shopId='+item.content.shopId">
						<HomeStore :shopName="item.content.shopName" :shopImage="item.content.shopImage" :shopAddress="item.content.shopAddress" />
					</navigator>
				</view>

				<view class="over">
					<text>没有更多了 ~ </text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import HomeSearch from "../../components/homeSearch/HomeSearch.vue";
	import HomeStore from "../../components/homeStore/HomeStore.vue";
	//vuex
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers(
		"home"
	);

	export default {
		components: {
			HomeSearch,
			HomeStore
		},
		data() {
			return {
				//位置信息
				longitude: '',
				latitude: ''
			}
		},
		mounted() {
			this.getOneClass(),
			this.getShop(),
			this.getLocation()
		},
		computed: {
			...mapState(["oneClass","near","listShop"])
		},
		methods: {
			...mapActions(["getShop", "getOneClass","nearStore"]),
			//
			toServicePage(title) {
				console.log(title);
				if (title == '洗车养护') {
					uni.navigateTo({
						url: '/pages/home/carCare',
						animationType: 'zoom-fade-out',
						animationDuration: 200
					});
				} else {
					uni.navigateTo({
						url: '/pages/home/chooseCar',
						animationType: 'zoom-fade-out',
						animationDuration: 200
					});
				}

			},
			//4s店铺详情
			toStore(shopId) {
				uni.navigateTo({
					url: '/pages/home/store?shopId=' + shopId
				});
			},
			//获取经纬度
			getLocation() {
				const $this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						$this.nearStore({
							lat: res.latitude - 0,
							lng: res.longitude - 0,
							distance: 10
						})
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.home {
		position: relative;
		background-color: #f9f9f9;

		.header {
			overflow: hidden;
			height: 340rpx;
			background: linear-gradient(120deg, #fd8839, #fd873c, #fd8846, #fd8c38, #fda548, #fda548, #fd793a, #fd883a);
			border-radius: 0 0 10px 10px;
		}

		.swiper {
			width: 700rpx;
			height: 240rpx;
			position: absolute;
			padding: 0 24rpx;
			top: 220rpx;
			left: 0;
		}

		.topline {
			padding: 0 24rpx;
			margin-top: 140rpx;
		}

		.type {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 24rpx;
			margin: 24rpx;

			.top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;

				.item {
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					align-items: center;
				}
			}

			.bottom {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					display: flex;
					flex-direction: column;
					font-size: 22rpx;
					align-items: center;
					margin: 0 20rpx;

					.title {
						margin: 16rpx 0 32rpx 0;
					}
				}
			}
		}

		.ceramicChip {
			display: flex;
			justify-content: space-between;
			padding: 24rpx;
			font-size: 30rpx;
			font-weight: bold;

			.item1 {
				background-color: #ffe8d2;
				border-radius: 30rpx 0 0 30rpx;
				margin-right: 10rpx;
				color: #ff5e00;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding-left: 30rpx;
			}

			.item2 {
				background-color: #d1edff;
				border-radius: 0 30rpx 30rpx 0;
				margin-bottom: 10rpx;
				color: #1f5cd5;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.item3 {
				display: flex;
				background-color: #d8ffd4;
				border-radius: 0 30rpx 30rpx 0;
				color: #00b112;
				justify-content: space-around;
				align-items: center;
			}
		}

		.newPeople {
			padding: 24rpx;
		}

		.niceStore {
			padding: 0 24rpx;

			.content {
				display: flex;
				height: 440rpx;

				.scroll-item {
					background-color: #FFFFFF;
					margin-right: 24rpx;
					padding: 24rpx;

					.image {
						display: flex;
						flex-direction: column;

						.title {
							font-weight: bold;
							font-size: 32rpx;
							padding-top: 24rpx;
						}

						.browse {
							font-size: 24rpx;
							color: #ffb373;
							padding-bottom: 24rpx;
						}
					}

					.service {
						display: flex;
						font-size: 24rpx;
						text-align: center;
					}
				}
			}
		}

		.nearbyStores {
			padding: 24rpx;

			.chooseLine {
				display: flex;
				padding: 24rpx 0;

				.chooseIcon {
					position: absolute;
					right: 24rpx;
				}
			}
		}

		.business {
			color: #ff8219;
			font-size: 24rpx;

			.businessName {
				background-color: #fff5db;
				border-radius: 24rpx;
				margin-right: 40rpx;
			}
		}

		.footer {
			padding: 24rpx;

			.over {
				font-size: 22rpx;
				color: #666666;
				text-align: center;
			}
		}
	}
</style>
